<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>bootstrap响应式</title>
</head>
<body>
    <!-- 头部导航 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <!-- 非折叠区域 -->
            <div class="navbar-header">
                <a href="" class="navbar-brand"><img src="./img/logo.png" alt=""></a>
                <div class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>
            </div>
            <!-- 折叠区域-->
            <div class="collapse navbar-collapse" id="mymenu">
                <!-- 导航 -->
                <ul class="nav navbar-nav">
                   <li><a href="#">MAC</a></li> 
                   <li><a href="#">iPad</a></li> 
                   <li><a href="#">iPhone</a></li> 
                   <li><a href="#">Watch</a></li> 
                   <li><a href="#">Music</a></li> 
                   <li><a href="#">技术支持</a></li> 
                </ul>
                <!-- 搜索 -->
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" name="" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>	
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- banner巨幕 -->
    <div class="jumbotron">
        <div class="container">
            <div class="row">
                <!-- 左边内容 -->
                <div class="left col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
                    <img src="./img/banner_title.png" class="img-responsive" alt="">
                    <h2>hello 未来</h2>
                    <p>一切都来自一系列值得深思的问题，现在的电脑是否反而局限了人们的做事方法？电脑究竟应该是什么样子？在今天，越来越多的人喜欢直接在 iOS 设备上，来完成原本用电脑做的事。这，让我们看到了电脑的未来：能用手触控，用键盘输入，用镜头探索世界，用笔写写画画1；既轻便易用，又强大到能随时随地工作、学习、创造，激发你看事做事的新方式。所谓“电脑”，就应该像今天的 iPad 一样。</p>
                </div>
                <!-- 右边内容 -->
                <div class="right col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">
                    <img src="./img/fruit.png" alt="" class="img-responsive">
                </div>
            </div>
        </div>
    </div>

    <!-- part1 : 活动图片 -->
    <div class="part01">
        <div class="container part1">
            <h3 class="text-center">增强现实</h3>
            <p class="text-center">iOS 是一个庞大的增强现实平台。各类游戏和 app 现可超越屏幕限制，带来超乎想象的浸入式流畅体验。由于充分利用了 iPad 绚丽的视网膜显示屏和强大的摄像头，现在你能以虚拟的方式重新装饰家居、无需拆解就能探索物体的内部结构，甚至还能带着恐龙并肩散步。种种可能，只待你去发现。</p>
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="card">
                        <img class="img-responsive" src="./img/a.jpg" alt="">
                        <h3 class="text-center">WWDC18</h3>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="card">
                        <img class="img-responsive" src="./img/b.jpg" alt="">
                        <h3 class="text-center">欣赏最新金曲奖作品</h3>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="card">
                        <img class="img-responsive" src="./img/c.jpg" alt="">
                        <h3 class="text-center">macOS Mojave</h3>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="card">
                        <img class="img-responsive" src="./img/d.jpg" alt="">
                        <h3 class="text-center">hello, 未来</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- goods 商品 -->
    <div class="goods container">
        <div class="title">
            <h3 class="pull-left">推荐商品</h3>
            <a href="#" class="pull-right">更多 ></a>
        </div>
        <div class="row">
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-sm-6 col-xs-6">
                <div class="card">
                    <img class="img-responsive" src="./img/good_pic.jpg" alt="">
                    <h3 class="text-center">iphoneX</h3>
                    <p class="text-center">
                        <span>￥</span>
                        <span>25.00</span>
                        <span>/500g</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer">
        <div class="container">
            <p class="text-center">关于我们|联系我们|招聘人才|友情链接</p>
            <p class="text-center">CopyRight © 2016 NANANA息技术有限公司 All Rights Reserved</p>
            <p class="text-center">电话：010-****888 京ICP备*******8号</p>
        </div>
    </div>

    <script>
        window.addEventListener('scroll', handleScroll)
        function handleScroll () {
            let top = document.body.scrollTop ||  document.documentElement.scrollTop
            if (top>180){
                $('.goods').css({'opacity': 1, "transform": 'translateY(0px)'})
            } 
        }
    </script>
</body>
</html>